<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet"/>
    <link th:href="@{/css/common.css}" rel="stylesheet"/>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form" lay-filter="searchForm">
                <div class="layui-form-item layui-form-pane">
                    <label class="layui-form-label" for="username">姓名</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" id="username" name="username" autocomplete="off"
                               placeholder="请输入姓名">
                    </div>
                    <label class="layui-form-label" for="idCard">身份证</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" id="idCard" name="idCard" autocomplete="off"
                               placeholder="请输入身份证">
                    </div>
                    <label class="layui-form-label" for="major">学院</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" id="major" name="major" autocomplete="off"
                               placeholder="请输入专业">
                    </div>
                </div>
                <div class="layui-form-item layui-form-pane">
                    <label class="layui-form-label" for="grade">年级</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" id="grade" name="grade" autocomplete="off"
                               placeholder="请输入年级">
                    </div>
                    <label class="layui-form-label" for="classNo">班级</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" id="classNo" name="classNo" autocomplete="off"
                               placeholder="请输入班级">
                    </div>
                    <label class="layui-form-label" for="type">致贫类型</label>
                    <div class="layui-input-inline">
                        <select id="type" name="type">
                            <option value="">请选择类型</option>
                            <option value="1">因病因灾</option>
                            <option value="2">劳动力不足</option>
                            <option value="4">残疾学生</option>
                            <option value="5">少数民族困难学生</option>
                            <option value="6">烈士子女</option>
                            <option value="7">其他</option>
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <button class="layui-btn layui-btn-radius layui-btn-normal" lay-submit lay-filter="searchBtn"
                                id="searchBtn">
                            <i class="layui-icon layui-icon-search"></i>查询
                        </button>
                        <button class="layui-btn layui-btn-radius layui-btn-primary" lay-submit lay-filter="resetBtn">
                            <i class="layui-icon layui-icon-refresh"></i>重置
                        </button>
                    </div>
                </div>
            </div>
            <table class="layui-table" id="dataTable" lay-filter="dataTable"></table>

            <!-- 加入需要操作的按钮-->
            <script type="text/html" id="toolbar">
                <button type="button"  class="layui-btn layui-btn-xs layui-btn-text" lay-event="backVisit">
                    <i class="layui-icon layui-icon-edit">回访登记</i>
                </button>
                <button type="button"  class="layui-btn layui-btn-xs layui-btn-text" lay-event="loanApprove">
                    <i class="layui-icon layui-icon-edit">贷款审批</i>
                </button>
            </script>
        </div>
    </div>
</div>

<!-- 点击之后显示的表单内容-->
<div class="layui-form" style="display: none" id="visitForm" lay-filter="visitForm">
    <div class="layui-form-item">
        <input name="id" type="hidden">
    </div>
    <div class="layui-btn-container">
        <button type="button" class="layui-btn layui-btn-normal" id="test8"  >选择文件</button>
        <button type="button" class="layui-btn" id="test9" style="position: absolute;right: 500px"  >开始上传</button>
    </div>
    <div class="layui-form-item layui-hide">
        <button lay-submit lay-filter="accessBtn" id="accessBtn"></button>
        <button lay-submit lay-filter="backBtn" id="backBtn"></button>
    </div>
</div>

<div class="layui-form" style="display: none" id="approveForm" lay-filter="approveForm">
    <div class="layui-form-item">
        <input name="loanId" type="hidden">
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required" for="approve">审核情况</label>
        <div class="layui-input-block">
            <select class="layui-input" id="approve" name="approve">
                <option disabled>请选择审核状态</option>
                <option value="3">审核通过</option>
                <option value="4">审核不通过</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label " for="refuseReasons">备注原因</label>
        <div class="layui-input-block">
            <textarea name="refuseReasons" id="refuseReasons" placeholder="若不通过，请备注原因" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item layui-hide">
        <button lay-submit lay-filter="approveBtn" id="approveBtn"></button>
        <button lay-submit lay-filter="cancelBtn" id="cancelBtn"></button>
    </div>
</div>





<th:block th:include="include :: footer"/>
<script th:src="@{/layui/layui.js}"></script>
<script th:inline="none">
    layui.use(["table", "form","upload"], () => {
        const table = layui.table, form = layui.form, upload = layui.upload, $ = layui.$;

        const cols = [[
            {type: "numbers"},
            {title: "姓名", field: "username",width: 100,align: 'center'},
            {title: "性别", field: "gender",width: 80,align: 'center'},
            {title: "电话号码", field: "phone",width: 150,align: 'center'},
            {title: "身份证", field: "idCard",width: 200,align:'center'},
            {title: "专业", field: "major",width: 150,align: "center"},
            {title: "年级", field: "grade",width: 100,align: 'center'},
            {title: "班级", field: "classNo",width: 100,align: 'center'},
            {title: "致贫类型", field: "type",width: 150,align: "center",templet:function (e){
                if (e.type == 1 ){
                    return "因病因灾";
                }else if(e.type == 2){
                    return "劳动力不足";
                }else if(e.type == 3){
                    return "残疾学生";
                }else if(e.type ==4 ){
                    return "少数民族子女";
                }else if(e.type == 5){
                    return "烈士子女";
                }else{
                    return "其他"
                }
                }},

            {title: "贷款原因", field: "reasons",width: 150,align: "center"},
            {title: "贷款金额", field: "amount",width: 100,align: "center"},
            {title: "贷款年限", field: "loanYears",width: 100,align: "center"},
            {title: "创建时间", field: "createTime",width: 180,align: "center"},
            {title: "操作栏", toolbar: "#toolbar", fixed: "right", width: 220,align: "center"}
        ]];

        const dataTable = table.render({
            elem: "#dataTable",
            height: "600px",
            toolbar: "#tableBar",
            id: "dataTable",
            page: {
                layout:['limit','count','prev','page','next','skip'],
                curr: 1,
                limit: 20
            },
            limit:[5,10,20,30,40,50],
            url: ctx + "loan/loan/getVerityLoanList",
            parseData: ({code, data, msg}) => {
                const {list, total} = data;
                return {
                    "code": code,
                    "msg": msg,
                    "count": total,
                    "data": list
                }
            },
            cols: cols
        });



        form.on("submit(searchBtn)", data => {
            dataTable.reload({
                where: data.field,
                page: {
                    curr: 1
                }
            })
        })

        form.on("submit(resetBtn)", data => {
            form.val("searchForm", {
                username: "",
                idCard: "",
                major: "",
                grade: "",
                classNo: "",
                type: ""
            })
            $("#searchBtn").click();
        })




     // 绑定我们的回访事件 ：backVisit、visitForm accessBtn backBtn dataTable
       var formData = null;
        table.on("tool(dataTable)", (obj) => {
            const {event, data, tr} = obj;
            formData = obj;
            switch (event) {
                // 选择要绑定的事件
                case "backVisit":
                    // 显示我们的内容
                    form.val("visitForm", data);
                    openVisitForm(() => {
                        loanId = data.id;
                        $("#accessBtn").click();
                    });
                    break;
                case "loanApprove":
                    form.val("approveForm",data);
                    openApproveForm(()=>{
                        loanId = data.loanId;
                        console.log(data);
                        $("#approveBtn").click();
                    });
                    break;
            }
        })
        // 绑定确认事件
        const openVisitForm = access => {
            layer.open({
                type: 1,
                content: $("#visitForm"),
                area: ["1000px", "180px"],
            })
        }

        var loanId = 0;
        upload.render({
            elem: '#test8'
            ,url: '/loan/loan/uploadVoice'
            ,accept: 'audio' //音频
            ,before:function () {
                this.data = {
                    loanId:formData.data.loanId
                }
            }
            ,auto: false
            ,multiple: true
            ,bindAction: '#test9'
            ,done: function(res){
                if(res.code === 0){
                    layer.msg('操作成功');
                    layer.reload();
                }else{
                    layer.msg(res.msg);
                }
            }
        });


        const openApproveForm = resolve =>{
            console.log(loanId);
            layer.open({
                type: 1,
                content: $("#approveForm"),
                area: ["300px", "400px"],
                btn: ["确定", "取消"],
                btnAlign: "c",
                yes: resolve
            })
        }

        form.on("submit(approveBtn)",data =>{
            accessed(data);
        })

        const accessed = (data) => {
            console.log(data)
            const url = "loan/loan/approveLoanApply?loanId=" + data.field.loanId
            $.ajax({
                url: ctx + url,
                method: "post",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(data.field),
                success: ({code, msg}) => {
                    if (code !== 0) {
                        return layer.msg(msg, {icon: 5})
                    }
                    dataTable.reload();
                    layer.closeAll();
                }
            })
        }
    });
</script>
</body>
</html>